<template>
  <div style="height: 100%">
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: {},
      charts: '',
      xAngleList: [],
      yList: [],
      xyList: [],
      timerList: [],
      // 监测点名称
      monitorName: '',
      pieData: [],
      legendData: [],
      count: 100
    }
  },
  computed: {
    options() {
      var that = this
      const Echarts = require('echarts')
      return {
        animationDuration: 2000, // 动画时长 可以接受 回调函数
        title: {
          text: this.monitorName,
          x: 'center',
          top: 20
        },

        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            var contentArr = []
            contentArr.push('<p style="font-size: 10px">' + params.marker + params.data.name + '：' + params.data.value + '</p>')
            return contentArr.join('<br/>')
          }
        },
        legend: {
          padding: [0, 20, 0, 20],
          // 设置为可滚动的图例
          orient: 'vertical',
          top: 'center',
          right: '0',
          icon: 'circle',
          data: this.legendData,
          formatter: (name) => {
            let target
            const value = this.pieData.filter(x => x.name === name)[0].value
            for (let i = 0, l = this.pieData.length; i < l; i++) {
              if (this.pieData[i].name === name) {
                target = this.pieData[i].value | 0
                const arr = [
                  name + '   ' +
                  value + '   ' +
                  +((target / this.count?target / this.count:0) * 100).toFixed(2) + '%'
                ]
                return arr.join('\n')
              }
            }
          },
          textstyle: {
            rich: {
              name: {
                fontsize: 20,
                align: 'left',
                padding: [20, 0, 20, 20],
                lineHeight: 40,
                width: 180
              },
              value: {
                fontsize: 20,
                align: 'right',
                padding: [20, 0, 20, 20]
              },
              percentage: {
                fontsize: 20,
                align: 'right',
                padding: [20, 0, 20, 20]
              }
            }
          }
        }
        ,
        graphic: {
          left: "23%",
          type: "text",
          top: "center",
          style: {
            text: `总数 ${this.count}`,
            textAlign: "center",
            fill: "#047300",
            font: '25px Microsoft YaHei'
          },
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            center:['30%','50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: this.pieData,
            label: {
              show: true,
              position: 'center',
              formatter: function (count) {
                return ''
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 50,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
          },
        ],

      }
    }
    ,
  },

  methods: {
    initEcharts() {
      if (this.charts) {
        this.charts.dispose()
        this.charts = undefined
      }
      const Echarts = require('echarts')
      this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
      var _this = this
      this.charts.on('mouseout', params => {
      })
      this.$nextTick(() => {
        this.charts.showLoading({
          text: '久感科技为你服务', //显示的文本
          color: '#c23531', //显示转圈的圆圈颜色
          textCloor: '#000', //显示文本的颜色
          maskColor: 'rgba(255,255,255,0.8)', //显示的背景色
          // 字体大小。从 `v4.8.0` 开始支持。
          fontSize: 32,
          // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
          showSpinner: true,
          // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
          spinnerRadius: 14,
          // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
          lineWidth: 5,
          // 字体粗细。从 `v5.0.1` 开始支持。
          fontWeight: 'normal',
          // 字体风格。从 `v5.0.1` 开始支持。
          fontStyle: 'normal',
          // 字体系列。从 `v5.0.1` 开始支持。
          fontFamily: 'sans-serif'
        })

      })
    }
    ,
    updateEchart(dataList,nameList,count, name) {
      this.legendData = nameList
      this.pieData = dataList
      this.monitorName = name
      this.count = count | 0
      this.initEcharts()
      this.charts.setOption(this.options)
      this.$nextTick(() => {
        this.charts.hideLoading()
      })

      this.charts.resize()
    }
    ,
  }
  ,
}
</script>
<style>
.formaterUl li {
  margin-bottom: 5px;
}
</style>
